<template>
  <div class="container">
    <el-row :gutter="20" class="height_full">
      <el-row :gutter="20" class="height_full">
        <el-col :span="12">
          <el-button type="primary" class="mb_15" @click="editVisible = true"
            >新增角色</el-button
          >
          <el-table
            v-loading="isLoading1"
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
          >
            <el-table-column type="index" label="序号" align="center"> </el-table-column>
            <el-table-column prop="name" label="角色" align="center"> </el-table-column>
            <el-table-column
              prop="remark"
              :show-overflow-tooltip="true"
              label="角色描述"
              align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  @click="deleteRole(scope.$index, scope.row)"
                  >删除</el-button
                >
                <el-button
                  type="text"
                  @click="editRole(scope.$index, scope.row)"
                  >编辑</el-button
                >
                <el-button
                  type="text"
                  @click="rightRole(scope.$index, scope.row)"
                  >权限</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageGrid.pageNo"
              :page-sizes="pageSizeArr"
              :page-size="pageGrid.pageSize"
              layout="total, sizes, prev, pager, next"
              :total="totalRole"
            >
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12" class="height_full border_t" v-loading="isLoading2">
          <div class="height_full">
            <div class="role-tips">
              <div>当前编辑权限的角色名称：{{delPer.roleName || '-'}}</div>
              <div v-if="perDiaData.length" class="t_r">
                <el-button type="primary" @click="checkAll">全选</el-button>
                <el-button type="default" @click="cancelAll">取消选择</el-button>
              </div>
            </div>
            <el-form label-width="100px" class="hei_form">
              <el-checkbox-group v-model="delPer.resourceIds">
                <div class="role_out" v-for="item in perDiaData" :key="item.id">
                  <div class="role_head">
                    <el-checkbox
                      :key="item.id"
                      :label="item.id"
                      @change="(val) => selectMenu(val, item)"
                      >{{ item.resourceName }}</el-checkbox
                    >
                  </div>
                  <div
                    class=""
                    style="
                      margin-left: 25px;
                      margin-right: 20px;
                      vertical-align: text-top;
                    "
                    :key="itemC.id"
                    v-for="itemC in item.children"
                  >
                    <el-checkbox :label="itemC.id" :key="itemC.id">{{
                      itemC.resourceName
                    }}</el-checkbox>
                    <div
                      v-for="itemCC in itemC.children"
                      :key="itemCC.id"
                      style="
                        margin-left: 25px;
                        margin-right: 20px;
                        vertical-align: text-top;
                      "
                    >
                      <el-checkbox :label="itemCC.id" :key="itemCC.id">{{
                        itemCC.resourceName
                      }}</el-checkbox>
                      <div
                        class=""
                        style="
                          margin-left: 25px;
                          margin-right: 20px;
                          vertical-align: text-top;
                        "
                        :key="itemCCC.id"
                        v-for="itemCCC in itemCC.children"
                      >
                        <el-checkbox :label="itemCCC.id" :key="itemCCC.id">{{
                          itemCCC.resourceName
                        }}</el-checkbox>
                      </div>
                    </div>
                  </div>
                </div>
              </el-checkbox-group>
            </el-form>
            <div class="t_a">
              <el-button
                type="primary"
                style="margin-top: 10px"
                @click="surePer"
                v-if="perDiaData.length"
                >确定</el-button
              >
            </div>
          </div>
        </el-col>
      </el-row>
    </el-row>

    <!--角色管理-->
    <el-dialog
      :close-on-click-modal="false"
      @close="closeDia"
      title="角色管理"
      :visible.sync="editVisible"
      width="600px"
    >
      <el-form label-width="100px" class="ruleForm">
        <el-form-item label="角色名称">
          <el-input v-model="addRole.name"></el-input>
        </el-form-item>
        <el-form-item label="角色说明">
          <el-input type="textarea" v-model="addRole.remark"></el-input>
        </el-form-item>
      </el-form>
      <div class="t_r">
        <el-button type="primary" @click="createRole">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from "../../../api/index";
import commonInfo from "../../../utils/common";
import { menuData } from "../../common/menu";

export default {
  name: "RoleManagement",
  data() {
    return {
      pageSizeArr: commonInfo.pageSizeArr,
      editVisible: false,
      isLoading1: false,
      isLoading2: false,
      tableData: [],
      totalRole: 0,
      pageGrid: {
        //分页数据
        pageNo: 1,
        pageSize: 10,
      },
      addRole: {
        name: "",
        remark: "",
      },
      isClickRole: true,
      isClickRolePer: true,
      delPer: {
        roleName: "",
        resourceIds: [],
      },
      perDiaData: [],
    };
  },
  created() {
    this.perDiaData = JSON.parse(JSON.stringify(menuData));
    this.adminRolePageList();
  },
  methods: {
    //关闭弹窗
    closeDia() {
      this.addRole = {
        name: "",
        remark: "",
      };
    },
    //编辑角色
    editRole(index, row) {
      this.editVisible = true;
      this.addRole.name = row.name;
      this.addRole.remark = row.remark;
      this.addRole.id = row.id;
    },
    delAll(arr) {
      let _t = this;
      for (let i = 0; i < arr.length; i++) {
        _t.delPer.resourceIds.push(arr[i].id);
        if (arr[i].children && arr[i].children.length) {
          _t.delAll(arr[i].children);
        }
      }
    },
    //全选
    checkAll() {
      this.delPer.resourceIds = [];
      this.delAll(this.perDiaData);
    },
    //取消全选
    cancelAll() {
      this.delPer.resourceIds = [];
    },
    //获取角色权限
    rightRole(index, row) {
      this.delPer.resourceIds = [];
      this.delPer.roleName = row.name;
      api.roleResourceByRoleName({ role: row.name }).then((res) => {
        if (res.data && res.data.menus) {
          res.data.menus = JSON.parse(res.data.menus)
          for (let i = 0; i < res.data.menus.length; i++) {
            this.delPer.resourceIds.push(res.data.menus[i]);
          }
        }        
      });
    },
    selectMenu(val, row) {
      if (row.children && row.children.length) {
        if (val) {
          this.delAll(row.children);
        } else {
          row.children.forEach((x) => {
            this.delPer.resourceIds = this.delPer.resourceIds.filter(
              (id) => id !== x.id
            );
          });
        }
      }
    },
    //确定用户权限
    surePer() {
      if (!this.delPer.roleName) return this.$message.error("请先选择要设置权限的角色");
      if (!this.isClickRolePer) return;
      this.isClickRolePer = false;
      let send = {
        role: this.delPer.roleName,
        menus: [],
      };
      this.delPer.resourceIds.map((item) => {
        send.menus.push(item);
      });

      send.menus = [...new Set(send.menus)];
      send.menus = JSON.stringify(send.menus);
      api.saveRoleResource(send).then(
        (res) => {
          if (res && res.code === 200) {
            this.$message.success('保存成功');
            this.adminRolePageList();
            this.isClickRolePer = true;
          } else {
            this.isClickRolePer = true;
          }
        },
        (error) => {
          this.isClickRolePer = true;
        }
      );
    },
    //后台角色列表翻页接口ok
    adminRolePageList() {
      this.isLoading1 = true;
      api.adminRolePageList({ ...this.pageGrid }).then((res) => {
        if (res.code === 200) {
          this.tableData = res.totalElement;
          this.totalRole = res.total;
        } else {
          this.$message.error(res.message);
        }
        this.isLoading1 = false;
      });
    },
    //分页
    handleCurrentChange(val) {
      this.pageGrid.pageNo = val;
      this.adminRolePageList();
    },
    //分页
    handleSizeChange(val) {
      this.pageGrid.pageSize = val;
      this.adminRolePageList();
    },
    //新增角色ok
    delRole(res) {
      this.isClickRole = true;
      if (res.code === 200) {
        this.$message.success("操作成功");
        this.pageGrid.pageNo = 1;
        this.adminRolePageList();
        this.addRole = {
          name: "",
          remark: "",
        };
        this.editVisible = false;
      } else {
        this.$message.error(res.message);
      }
    },
    createRole() {
      if (!this.addRole.name || !this.addRole.remark) {
        return this.$message.error("填写不完整！");
      }
      let add = JSON.parse(JSON.stringify(this.addRole));
      if (!this.isClickRole) return;
      this.isClickRole = false;
      if (add.id) {
        api.updateRole(add).then(
          (res) => {
            this.delRole(res);
          },
          (error) => {
            this.isClickRole = true;
          }
        );
      } else {
        api.createRole(add).then(
          (res) => {
            this.delRole(res);
          },
          (error) => {
            this.isClickRole = true;
          }
        );
      }
    },
    //删除角色ok
    deleteRole(index, row) {
      this.$confirm("确认删除？")
        .then((_) => {
          api.deleteRole({ id: row.id }).then((res) => {
            if (res.code == 200) {
              this.$message.success('删除成功！');
              this.pageGrid.pageNo = 1;
              this.adminRolePageList();
            } else {
              this.$message.error(res.msg);
            }
          });
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped lang="less">
.container {
  height: 100%;
  box-sizing: border-box;
}
.hei_form {
  height: calc(100% - 80px);
  overflow-y: auto;
}
.border_t {
  box-shadow: 0 0 2px 2px #efefef;
  padding-top: 10px;
  box-sizing: border-box;
}
.role_head {
  margin: 10px 0 5px 0;
}
/deep/ .role_head .el-checkbox__label {
  font-size: 16px;
  color: #20a0ff;
}
.role-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ruleForm {
  width: 400px;
}
</style>
